<template>
  <div>
    <ul>
      <li v-for="(v, i) in data.slice(0, 8)" :key="v.iId">
        <div
          v-if="i != 0"
          :class="{ qb: type == 'qb', b: type == 'b', y: type == 'y' }"
        >
          {{ title }}
        </div>
        <div>{{ v.sTitle }}</div>
        <div v-if="i != 0">{{ time(v.sIdxTime) }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["data", "title", "type"],
  mounted() {
    console.log(this.data);
  },
  methods: {
    time(t) {
      return (
        t.split(" ")[0].split("-")[1] + "/" + t.split(" ")[0].split("-")[2]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  padding-top: 10px;
  li {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &:first-child {
      div {
        background-color: rgba(128, 128, 128, 0.263);
        padding: 5px 100px 5px 10px;
        // border: 1px solid blueviolet;
        color: rgb(243, 194, 88);
        font-size: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    &:not(:first-child) {
      font-size: 14px;
      color: rgb(184, 185, 197);
      padding: 10px 0 4px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        &:first-child {
          padding: 0 4px;
          border: 1px solid red;
          border-radius: 3px;
          color: red;
          &.b {
            border-color: rgb(77, 156, 255);
            color: rgb(77, 156, 255);
          }
          &.qb {
            border-color: rgb(30, 150, 171);
            color: rgb(30, 150, 171);
          }
          &.y {
            border-color: rgb(243, 194, 88);
            color: rgb(243, 194, 88);
          }
        }
        &:nth-child(2) {
          margin-right: 16px;
          width: 216px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>